<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 智能聊天系统</title>
    <link rel="stylesheet" href="auth-style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-logo">
                <i class="fas fa-user-plus"></i>
            </div>
            <h1 class="auth-title">创建账户</h1>
            <p class="auth-subtitle">注册新账户开始使用智能助手</p>
        </div>

        <form id="registerForm" class="auth-form">
            <div class="form-group">
                <label for="username" class="form-label">
                    <i class="fas fa-user"></i>
                    用户名
                </label>
                <input type="text" id="username" name="username" class="form-input" placeholder="请输入用户名" required>
            </div>

            <div class="form-group">
                <label for="password" class="form-label">
                    <i class="fas fa-lock"></i>
                    密码
                </label>
                <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" required>
            </div>

            <div class="form-group">
                <label for="confirmPassword" class="form-label">
                    <i class="fas fa-lock"></i>
                    确认密码
                </label>
                <input type="password" id="confirmPassword" name="confirmPassword" class="form-input" placeholder="请再次输入密码" required>
            </div>

            <div class="form-group">
                <label for="captcha" class="form-label">
                    <i class="fas fa-shield-alt"></i>
                    验证码
                </label>
                <div class="captcha-container">
                    <input type="text" id="captcha" name="captcha" class="form-input captcha-input" placeholder="请输入验证码" required>
                    <img id="captchaImage" src="/captcha/image" alt="验证码" class="captcha-image" onclick="refreshCaptcha()">
                </div>
            </div>

            <button type="submit" class="auth-button">
                <i class="fas fa-user-plus"></i>
                注册
            </button>
        </form>

        <div class="auth-footer">
            <p>已有账号？ <a href="login.html" class="auth-link">立即登录</a></p>
        </div>

        <div id="message" class="message"></div>
    </div>
</div>

<script>
    // 刷新验证码
    function refreshCaptcha() {
        const captchaImage = document.getElementById('captchaImage');
        captchaImage.src = '/captcha/image?t=' + new Date().getTime();
    }

    // 注册表单提交
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const captcha = document.getElementById('captcha').value;

        // 验证密码是否一致
        if (password !== confirmPassword) {
            alert('两次输入的密码不一致，请重新输入');
            document.getElementById('password').value = '';
            document.getElementById('confirmPassword').value = '';
            document.getElementById('password').focus();
            return;
        }

        // 验证密码长度
        if (password.length < 6) {
            alert('密码长度至少为6位');
            return;
        }

        const messageDiv = document.getElementById('message');
        messageDiv.innerHTML = '注册中，请稍候...';
        messageDiv.className = 'message info';

        try {
            const response = await fetch('/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: username,
                    password: password,
                    code: captcha
                })
            });

            const result = await response.json();

            if (result.code === 1) {
                messageDiv.innerHTML = '注册成功！正在跳转到登录页面...';
                messageDiv.className = 'message success';

                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 2000);
            } else {
                messageDiv.innerHTML = result.msg || '注册失败，请重试';
                messageDiv.className = 'message error';
                refreshCaptcha();
            }
        } catch (error) {
            messageDiv.innerHTML = '网络错误，请检查网络连接后重试';
            messageDiv.className = 'message error';
            refreshCaptcha();
        }
    });

    // 页面加载时获取验证码
    window.onload = refreshCaptcha;
</script>
</body>
</html>